<template>
  <div>
    <div class="index-header-box" id="head">
      <div class="index-header">
        <div @click="cancel" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <div class="title">筛选</div>
      </div>
    </div>

    <div class="sea-tit">车型</div>

    <van-row class="page-block">
      <div class="search-car-box" style="padding-bottom: 0">
        <div class="box-item" v-for="(item,index) in typeArr" :class="{'active':typeVal==item.name}" @click="typeVal=item.name">
          <img class="img" :src="item.img"/>
          <div class="tit">{{item.name}}</div>
        </div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">车牌所在地</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':card_come==1}" @click="card_come=1">本地牌照</div>
        <div class="item-money" :class="{'active':card_come==2}" @click="card_come=2">外地牌照</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">
      <span class="pull-left">车龄</span>
      <span class="pull-left smll">（单位：年）</span>
      <span class="pull-right tit-right" v-if="year_old==0">不限</span>
      <span class="pull-right tit-right" v-if="year_old>0">{{year_old}}年</span>
    </div>
    <van-row class="page-block">
      <van-slider class="search-money-bar" v-model="year_old" :min="0" :max="10"/>

      <div class="search-money-bar-txt">
        <div class="txt-item">不限</div>
        <div class="txt-item">2</div>
        <div class="txt-item">4</div>
        <div class="txt-item">6</div>
        <div class="txt-item">8</div>
        <div class="txt-item">10</div>
      </div>
      <van-divider />
    </van-row>

    <div class="sea-tit">
      <span class="pull-left">行驶里程</span>
      <span class="pull-left smll">（单位：万公里）</span>
      <span class="pull-right tit-right" v-if="go_long==0">不限行驶里程</span>
      <span class="pull-right tit-right" v-if="go_long>0">{{go_long}}万公里</span>
    </div>
    <van-row class="page-block">
      <van-slider class="search-money-bar" v-model="go_long" :min="0" :max="15"/>

      <div class="search-money-bar-txt">
        <div class="txt-item">不限</div>
        <div class="txt-item">3</div>
        <div class="txt-item">6</div>
        <div class="txt-item">9</div>
        <div class="txt-item">12</div>
        <div class="txt-item">15</div>
      </div>
      <van-divider />
    </van-row>

    <div class="sea-tit">
      <span class="pull-left">排量</span>
      <span class="pull-left smll">（单位：升）</span>
      <span class="pull-right tit-right" v-if="row_amount==0">不限排量</span>
      <span class="pull-right tit-right" v-if="row_amount>0">{{row_amount}}升</span>
    </div>
    <van-row class="page-block">
      <van-slider class="search-money-bar" :step="0.5" v-model="row_amount" :min="0" :max="6"/>

      <div class="search-money-bar-txt">
        <div class="txt-item">不限</div>
        <div class="txt-item">1.0</div>
        <div class="txt-item">2.0</div>
        <div class="txt-item">3.0</div>
        <div class="txt-item">4.0</div>
        <div class="txt-item">6.0</div>
      </div>
      <van-divider />
    </van-row>

    <div class="sea-tit">排放标准</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':car_dis==6}" @click="car_dis=6">国六</div>
        <div class="item-money" :class="{'active':car_dis==5}" @click="car_dis=5">国五及以上</div>
        <div class="item-money" :class="{'active':car_dis==4}" @click="car_dis=4">国四及以上</div>
        <div class="item-money" :class="{'active':car_dis==3}" @click="car_dis=3">国三及以上</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">颜色</div>

    <van-row class="page-block">
      <div class="search-car-box" style="padding-bottom: 0">
        <div class="color-item" v-for="(item,index) in colorArr" :class="{'active':color==item}" @click="color=item">
          <i class="ico" :class="index"></i>
          <div class="tit">{{item}}</div>
        </div>



      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">变速箱</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':car_case==1}" @click="car_case=1">手动</div>
        <div class="item-money" :class="{'active':car_case==2}" @click="car_case=2">自动</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">座位数</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':seat_numb==2}" @click="seat_numb=2">2座</div>
        <div class="item-money" :class="{'active':seat_numb==3}" @click="seat_numb=3">3座</div>
        <div class="item-money" :class="{'active':seat_numb==4}" @click="seat_numb=4">4座</div>
        <div class="item-money" :class="{'active':seat_numb==5}" @click="seat_numb=5">5座</div>
        <div class="item-money" :class="{'active':seat_numb==7}" @click="seat_numb=7">7座及以上</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">燃油类型</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':oil_type=='汽油'}" @click="oil_type='汽油'">汽油</div>
        <div class="item-money" :class="{'active':oil_type=='柴油'}" @click="oil_type='柴油'">柴油</div>
        <div class="item-money" :class="{'active':oil_type=='电动'}" @click="oil_type='电动'">电动</div>
        <div class="item-money" :class="{'active':oil_type=='油电混合'}" @click="oil_type='油电混合'">油电混合</div>
        <div class="item-money" :class="{'active':oil_type=='其他'}" @click="oil_type='其他'">其他</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">国别</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" :class="{'active':car_country=='德系'}" @click="car_country='德系'">德系</div>
        <div class="item-money" :class="{'active':car_country=='日系'}" @click="car_country='日系'">日系</div>
        <div class="item-money" :class="{'active':car_country=='美系'}" @click="car_country='美系'">美系</div>
        <div class="item-money" :class="{'active':car_country=='法系'}" @click="car_country='法系'">法系</div>
        <div class="item-money" :class="{'active':car_country=='韩系'}" @click="car_country='韩系'">韩系</div>
        <div class="item-money" :class="{'active':car_country=='国产'}" @click="car_country='国产'">国产</div>
        <div class="item-money" :class="{'active':car_country=='其他'}" @click="car_country='其他'">其他</div>
      </div>
      <van-divider style="margin: 0" />
    </van-row>

    <div class="sea-tit">亮点配置</div>
    <van-row class="page-block">
      <div class="search-car-box" style="justify-content:inherit">
        <div class="item-money" v-for="(item,index) in labList" @click="chooseLabel(item.id,item)"
            :class="{'active':item.check}">{{item.title}}
        </div>
      </div>
    </van-row>


    <div class="btn-box">
      <van-button type="info" class="btn-primary" @click="back">确 定</van-button>
    </div>

  </div>

</template>

<script>
  export default {
    name: "SearchMore",
    components: {},
      props:['more'],
    data() {
      return {
          year_old: 0,
          go_long: 0,
          row_amount: 0,

          typeVal:'',
          typeArr:[
              {name:'两厢轿车',img:"http://www.xb2sc.cn/static/img/lx.8f26139.png"},
              {name:'三箱轿车',img:"http://www.xb2sc.cn/static/img/sx.61649e7.png"},
              {name:'跑车',img:"http://www.xb2sc.cn/static/img/pc.ba89e49.png"},
              {name:'SUV',img:"http://www.xb2sc.cn/static/img/suv.aabc063.png"},
              {name:'MPV',img:"http://www.xb2sc.cn/static/img/mpv.cd06cb7.png"},
              {name:'面包车',img:"http://www.xb2sc.cn/static/img/mbc.cbe8e3e.png"},
              {name:'皮卡',img:"http://www.xb2sc.cn/static/img/pk.80f1cba.png"}
          ],

          card_come:-1, //车牌所在地
          car_dis:0, //排放标准

          color:"", //颜色
          colorArr:{
              black:'黑色',
              white:'白色',
              sgray:'银灰色',
              gray:'深灰色',
              red:'红色',
              orange:'橙色',
              green:'绿色',
              blue:'蓝色',
              coffee:'咖啡色',
              violet:'紫色',
              xb:'香槟色',
              dc:'多彩色',
              yellow:'黄色',
              other:'其他',
          },

          car_case:-1, //变速箱
          seat_numb:0, //座位数量
          oil_type:"", //燃油类型
          car_country:"", //国别

          //其它配置
          labList:[],
          labArr:[],

          //初始化条件
          initData:this.more,

      }
    },
    computed: {},
    mounted: function () {
        this.init();
        window.history.pushState(null,null,'#');
        var that=this;
        window.addEventListener("popstate",e=>{
            that.cancel();
        },false);
    },
      beforeDestroy(){
          var that=this;
          window.addEventListener("popstate",e=>{
              that.cancel();
          },false);
      },
    methods: {
        init(){
            var that=this;

            that.$api.car.getLable().then(res => {
                var res = res.data;
                res.data.find(res => {
                    that.labArr.find(id => {
                        if (id == res.id) {
                            res.check = true;
                        }else{
                            res.check = false;
                        }
                    });
                    that.labList.push(res);
                });
            });

            Object.keys(that.initData).forEach((key, i) => {
                that[key]=that.initData[key];
            });
        },

      back() {
        var data={};

          if(this.typeVal!=""){
              data.typeVal=this.typeVal;
          }
          if(this.card_come!=-1){
              data.card_come=this.card_come;
          }
          if(this.year_old!=0){
              data.year_old=this.year_old;
          }
          if(this.go_long!=0){
              data.go_long=this.go_long;
          }
          if(this.row_amount!=0){
              data.row_amount=this.row_amount;
          }
          if(this.car_dis!=0){
              data.car_dis=this.car_dis;
          }
          if(this.color!=""){
              data.color=this.color;
          }
          if(this.car_case!=-1){
              data.car_case=this.car_case;
          }
          if(this.seat_numb!=0){
              data.seat_numb=this.seat_numb;
          }
          if(this.oil_type!=""){
              data.oil_type=this.oil_type;
          }
          if(this.car_country!=""){
              data.car_country=this.car_country;
          }
          if(this.labArr.length!=0){
              data.labArr=this.labArr;
          }

        this.$emit('seaData',data);
      },
      cancel(){
        this.$emit('cancel');
      },

        //选择加装配置
        chooseLabel(id, item) {
          if (!item.check) {
              item.check = true;
              this.labArr.push(id);
          } else {
              item.check = false;
              var arr = [];
              this.labArr.find(res => {
                  if (res != id) {
                      arr.push(res);
                  }
              });
              this.labArr = arr;
          }
          this.$forceUpdate();
        },

        //排量
        changeRow(v){
            this.row_amount=v.toFixed(1);
        },

    },
  }
</script>
